<template>
  <root-portal>
    <view class="u-popup">
      <u-overlay v-if="overlay" :show="show" :duration="overlayDuration" :customStyle="overlayStyle"
        :opacity="overlayOpacity" @click="overlayClick" @touchmove.stop.prevent :zIndex="zIndex - 10"></u-overlay>
      <u-transition :show="show" :customStyle="transitionStyle" :mode="position" :duration="duration"
        @afterEnter="afterEnter" @click="clickHandler">
        <view class="u-popup__content" :style="[contentStyle]" @tap.stop="noop">
          <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
          <view v-if="title" class="u-popup__content__title" :class="{ 'u-popup__content__title_border': title_border }">
            <view></view>
            <view>{{ title }}</view>
            <view v-if="closeable" class="u-popup__content__title__close"
              :class="['u-popup__content__close--' + closeIconPos]" hover-class="u-popup__content__close--hover"
              hover-stay-time="150" @tap.stop="close">
              <u-icon name="close" :color="closeableColor" size="44rpx" bold></u-icon>
            </view>
          </view>
          <slot></slot>
          <view v-if="closeable && !title" class="u-popup__content__close"
            :class="['u-popup__content__close--' + closeIconPos]" hover-class="u-popup__content__close--hover"
            hover-stay-time="150" @tap.stop="close">
            <u-icon name="close" :color="closeableColor" size="40rpx" bold></u-icon>
          </view>
          <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
        </view>
      </u-transition>
    </view>
  </root-portal>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

/**
 * popup 弹窗
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
 * @tutorial https://www.uviewui.com/components/popup.html
 * @property {Boolean}			show				是否展示弹窗 (默认 false )
 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
 * @property {String}			mode				弹出方向（默认 'bottom' ）
 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
 * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
 * @property {Object | String}	overlayStyle		自定义遮罩的样式
 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
 * @property {String | Number}	zIndex				层级 （默认 10075 ）
 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
 * @property {String | Number}	round				圆角值（默认 0）
 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
 * @property {Object}			customStyle			组件的样式，对象形式
 * @event {Function} open 弹出层打开
 * @event {Function} close 弹出层收起
 * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
 */
export default {
  name: "UPopup",
  mixins: [mpMixin, mixin, props],
  // #ifdef VUE3
  emits: ['close', 'open','click'],
  // #endif
  data() {
    return {
      overlayDuration: this.duration + 50,
    };
  },
  computed: {
    transitionStyle() {
      const style = {
        zIndex: this.zIndex,
        position: "fixed",
        display: "flex",
      };
      style[this.mode] = 0;
      if (this.mode === "left") {
        return uni.$u.deepMerge(style, {
          bottom: 0,
          top: 0,
        });
      } else if (this.mode === "right") {
        return uni.$u.deepMerge(style, {
          bottom: 0,
          top: 0,
        });
      } else if (this.mode === "top") {
        return uni.$u.deepMerge(style, {
          left: 0,
          right: 0,
        });
      } else if (this.mode === "bottom") {
        return uni.$u.deepMerge(style, {
          left: 0,
          right: 0,
        });
      } else if (this.mode === "center") {
        return uni.$u.deepMerge(style, {
          alignItems: "center",
          "justify-content": "center",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        });
      }
    },
    contentStyle() {
      const style = {};
      // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
      // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
      const { safeAreaInsets } = uni.$u.sys();
      if (this.mode !== "center") {
        style.flex = 1;
      }
      // 背景色，一般用于设置为transparent，去除默认的白色背景
      if (this.bgColor) {
        style.backgroundColor = this.bgColor;
      }
      if (this.round) {
        const value = uni.$u.addUnit(this.round);
        if (this.mode === "top") {
          style.borderBottomLeftRadius = value;
          style.borderBottomRightRadius = value;
        } else if (this.mode === "bottom") {
          style.borderTopLeftRadius = value;
          style.borderTopRightRadius = value;
          // if (this.closeable) {
          // 	style.paddingTop = '15px'
          // }
        } else if (this.mode === "center") {
          style.borderRadius = value;
        }
      }
      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
    },
    position() {
      if (this.mode === "center") {
        return this.zoom ? "fade-zoom" : "fade";
      }
      if (this.mode === "left") {
        return "slide-left";
      }
      if (this.mode === "right") {
        return "slide-right";
      }
      if (this.mode === "bottom") {
        return "slide-up";
      }
      if (this.mode === "top") {
        return "slide-down";
      }
    },
  },
  watch: {
    show(newValue, oldValue) {
      if (newValue === true) {
        // #ifdef MP-WEIXIN
        const children = this.$children;
        this.retryComputedComponentRect(children);
        // #endif
      }
    },
  },
  methods: {
    // 点击遮罩
    overlayClick() {
      if (this.closeOnClickOverlay) {
        this.$emit("close");
      }
    },
    close(e) {
      this.$emit("close");
    },
    afterEnter() {
      this.$emit("open");
    },
    clickHandler() {
      // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
      if (this.mode === "center") {
        this.overlayClick();
      }
      this.$emit("click");
    },
    // #ifdef MP-WEIXIN
    retryComputedComponentRect(children) {
      // 组件内部需要计算节点的组件
      const names = [
        "u-calendar-month",
        "u-album",
        "u-collapse-item",
        "u-dropdown",
        "u-index-item",
        "u-index-list",
        "u-line-progress",
        "u-list-item",
        "u-rate",
        "u-read-more",
        "u-row",
        "u-row-notice",
        "u-scroll-list",
        "u-skeleton",
        "u-slider",
        "u-steps-item",
        "u-sticky",
        "u-subsection",
        "u-swipe-action-item",
        "u-tabbar",
        "u-tabs",
        "u-tooltip",
      ];
      // 历遍所有的子组件节点
      for (let i = 0; i < children.length; i++) {
        const child = children[i];
        // 拿到子组件的子组件
        const grandChild = child.$children;
        // 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
        if (
          names.includes(child.$options.name) &&
          typeof child?.init === "function"
        ) {
          // 需要进行一定的延时，因为初始化页面需要时间
          uni.$u.sleep(50).then(() => {
            child.init();
          });
        }
        // 如果子组件还有孙组件，进行递归历遍
        if (grandChild.length) {
          this.retryComputedComponentRect(grandChild);
        }
      }
    },
    // #endif
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$u-popup-flex: 1 !default;
$u-popup-content-background-color: #fff !default;

.u-popup {
  flex: $u-popup-flex;

  &__content {
    background-color: $u-popup-content-background-color;
    position: relative;

    &--round-top {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    &--round-left {
      border-top-left-radius: 0;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 10px;
    }

    &--round-right {
      border-top-left-radius: 10px;
      border-top-right-radius: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 0;
    }

    &--round-bottom {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &--round-center {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    &__title {
      width: 100%;
      /* padding-top: 13px; */
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      box-sizing: border-box;
      flex-direction: row;
    }

    &__title_border {
      border-bottom: 1px solid #ECECEC;
    }

    &__close {
      position: absolute;

      &--hover {
        opacity: 0.4;
      }
    }

    &__close--top-left {
      top: 15px;
      left: 15px;
    }

    &__close--top-right {
      top: 15px;
      right: 15px;
    }

    &__close--bottom-left {
      bottom: 15px;
      left: 15px;
    }

    &__close--bottom-right {
      right: 15px;
      bottom: 15px;
    }
  }
}
</style>
